<template>
  <div class="container">
    <el-container>
      <el-header>
        <el-row class="bigbox">
          <div class="headText">
            <h2>{{headText}}</h2>
          </div>
          <div class="user">
            <el-icon>
              <UserFilled />
            </el-icon>
            <!-- <Fold /> -->
            <span>{{user}}</span>
          </div>
          <div class="button">
            <a href="/login" class="layout" @click="layout">退出</a>
          </div>
        </el-row>
      </el-header>
      <el-container>
        <el-aside :style="{
          width: isCollapse ? '63px' : '200px',
        }">
          <div class="toggle-button" @click="isCollapse = !isCollapse" :style="{
            width: isCollapse ? '63px' : '200px',
          }">
            <el-icon :size="20" color="#000000" v-if="isCollapse">
              <Fold />
            </el-icon>
            <el-icon :size="20" color="#00000" v-if="!isCollapse">
              <Expand />
            </el-icon>
          </div>
          <el-menu router :default-active="activePath" active-text-color="#fff" text-color="#bfcbd9"
            :unique-opened="false" background-color="#909399" class="el-menu-vertical-demo" :collapse="isCollapse"
            :collapse-transition="true" @open="handleOpen" @close="handleClose">
            <el-menu-item index="/home/dashboard" @click="saveActiveNav('/home/dashboard')">
              <el-icon>
                <IconMenu />
              </el-icon>
              <template #title>首页</template>
            </el-menu-item>
            <el-sub-menu index="/home/example/table">
              <template #title>
                <el-icon>
                  <Location />
                </el-icon>
                <span>组件</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/example/table" @click="saveActiveNav('/home/example/table')">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                  <template #title>表格</template>
                </el-menu-item>
                <el-menu-item index="/home/example/form" @click="saveActiveNav('/home/example/form')">
                  <el-icon>
                    <Tickets />
                  </el-icon>
                  <template #title>表单</template>
                </el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="/home/example/tree">
                <template #title>
                  <el-icon>
                    <ElementPlus />
                  </el-icon>
                  <span>Echart</span>
                </template>
                <el-menu-item index="/home/example/tree" @click="saveActiveNav('/home/example/tree')"><template #title>
                    <el-icon>
                      <ElementPlus />
                    </el-icon>
                    <span>图表</span>
                  </template></el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="/home/Dy-Component" @click="saveActiveNav('/home/Dy-Component')">
              <el-icon>
                <Document />
              </el-icon>
              <template #title>动态组件</template>
            </el-menu-item>
            <el-menu-item index="/home/text" @click="saveActiveNav('/home/text')">
              <el-icon>
                <Document />
              </el-icon>
              <template #title>富文本</template>
            </el-menu-item>
            <el-menu-item index="/home/user" @click="saveActiveNav('/home/user')">
              <el-icon>
                <Setting />
              </el-icon>
              <template #title>个人中心</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import srcUrl from '../assets/img/icon.png'
import {
  Expand,
  Fold,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  EditPen,
  Tickets,
  ElementPlus,
  UserFilled
} from '@element-plus/icons-vue'

export default {
  components: {
    Expand,
    Fold,
    Document,
    IconMenu,
    Location,
    Setting,
    EditPen,
    Tickets,
    ElementPlus,
    UserFilled
  },
  data () {
    return {
      isCollapse: false,
      activePath: '',
      headText: '知乎课堂后台管理系统',
      user: sessionStorage.getItem('user'),
      srcUrl: srcUrl
    }
  },
  created () {
    this.activePath = sessionStorage.getItem('activePath')
      ? sessionStorage.getItem('activePath')
      : '/home/dashboard'
  },
  mounted () { },
  methods: {
    handleOpen (activePath) {
      //   console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      //   console.log(key, keyPath)
    },
    saveActiveNav (activePath) {
      sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },
    layout () {
      var storage = window.sessionStorage

      storage.clear()
    }
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.el-header {
  background-color: #2661ef;
  color: #333;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
  position: fixed;
  width: 98vw;
  z-index: 9999;
}

.el-aside {
  width: 200px;
  height: 100%;
  color: #333;
  text-align: center;
  line-height: 200px;
  margin-top: 66px;
  // z-index: -1;
}

.el-main {
  color: #333;
  line-height: 60px;
  height: 100vh;
  overflow: hidden;
  margin-top: 66px;
  // z-index: -1;
}

// body>.el-container {
//     margin-bottom: 40px;
// }

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu {
  height: 100vh;
  // overflow: hidden;
}

.el-menu-item.is-active {
  background-color: #F56C6C !important;
}

.toggle-button {
  font-size: 18px;
  line-height: 24px;
  color: #000;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  background-color: #d9e0e7;
}

.bigbox {
  display: flex;
}

.headText {
  width: 40%;
  color: #fff;
  text-align: left;
  margin-left: 10px;
}

.user {
  flex: 1;
  text-align: right;
  font-size: 16px;
  color: #fff;
  float: right;
  margin-right: 10px;
}

.layout {
  color: #fff;
  text-decoration: none;
}

.button {
  width: 60px;
  height: 60px;
  background-color: red;
  color: #fff;
  cursor: pointer;
}
</style>
